<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<el-tabs v-model="activeName">
				<el-tab-pane label="店铺信息" name="first">
					<el-form :model="base" label-width="auto" style="max-width: 600px">
						<el-form-item label="商户名称：">{{ base.name }}</el-form-item>
						<el-form-item label="经营类目：">{{ base.cate_name }}</el-form-item>
						<el-form-item label="店铺类型：">{{ base.type_name }}</el-form-item>
						<el-form-item label="店铺性质：">
							<span v-if="base.apply_type == 1">个人店铺</span>
							<span v-else>商家店铺</span>
						</el-form-item>
						<el-form-item label="结算费率：">{{ base.rate }}%</el-form-item>
						<el-form-item label="店铺LOGO：">
							<ul class="img-list" style="width: 500px">
								<li v-if="base.shop_logo">
									<img :src="base.shop_logo" alt="图片" style="width: 58px;height: 58px">
									<div class="img-tools">
										<el-icon size="14" color="#fff">
											<component :is="deleteIcon" @click="removeImg()"/>
										</el-icon>
									</div>
								</li>
								<li>
									<div class="addImg" @click="showImage">
										<el-icon>
											<component :is="plusIcon"/>
										</el-icon>
									</div>
								</li>
							</ul>
						</el-form-item>
						<el-form-item label="店铺简介：">
							<el-input type="textarea" :rows="5" style="width: 500px" v-model="base.desc"></el-input>
						</el-form-item>
					</el-form>
					<el-button type="primary" style="margin-top: 20px" @click="save">保 存</el-button>
				</el-tab-pane>
				<el-tab-pane label="联系信息" name="second">
					<el-form :model="base" label-width="auto" style="max-width: 600px">
						<el-form-item label="联系人：">
							<el-input style="width: 500px" v-model="base.contacts"></el-input>
						</el-form-item>
						<el-form-item label="联系人电话：">
							<el-input style="width: 500px" v-model="base.phone"></el-input>
						</el-form-item>
						<el-form-item label="联系地址：">
							<el-input type="textarea" :rows="5" style="width: 500px" v-model="base.address"></el-input>
						</el-form-item>
					</el-form>
					<el-button type="primary" style="margin-top: 20px" @click="save">保 存</el-button>
				</el-tab-pane>
				<el-tab-pane label="认证信息" name="third">
					<el-form :model="base" label-width="auto" style="max-width: 600px">
						<el-form-item label="认证类型：">
							<span v-if="base.apply_type == 1">个人店铺</span>
							<span v-else>商家店铺</span>
						</el-form-item>
						<el-form-item label="联系人姓名：">{{ base.contacts }}</el-form-item>
						<el-form-item label="联系人手机号：">{{ base.phone }}</el-form-item>
						<el-form-item label="认证身份证正反面：">
							<el-image
								style="width: 60px; height: 60px;margin-right: 20px"
								:src="base.id_card_front"
								:preview-src-list="[base.id_card_front]"
							/>
							<el-image
								style="width: 60px; height: 60px"
								:src="base.id_card_back"
								:preview-src-list="[base.id_card_back]"
							/>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="提现设置" name="five">
					<el-form :model="base" label-width="auto" style="max-width: 600px">
						<el-form-item label="结算开户行：">
							<el-input style="width: 500px" v-model="base.bank_name"></el-input>
						</el-form-item>
						<el-form-item label="开户行支行：">
							<el-input style="width: 500px" v-model="base.bank_sub_name"></el-input>
						</el-form-item>
						<el-form-item label="开户行账号：">
							<el-input style="width: 500px" v-model="base.bank_no"></el-input>
						</el-form-item>
					</el-form>
					<el-button type="primary" style="margin-top: 20px" @click="save">保 存</el-button>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</el-main>

	<el-dialog title="" v-model="dialogVisible" width="1200px" class="image-check-dialog">
		<Attachment :need-select="true" @selected-img="selectedImg" @close-dialog="dialogVisible=false" :select-num="1"></Attachment>
	</el-dialog>
</template>

<script>
import Attachment from "@/components/attachment";

export default {
	components: {
		Attachment
	},
	data() {
		return {
			activeName: "first",
			base: {},
			plusIcon: "el-icon-plus",
			deleteIcon: "el-icon-delete",
			dialogVisible: false
		}
	},
	mounted() {
		this.getInfo()
	},
	methods: {
		async getInfo() {
			let res = await this.$API.system.index.get()
			this.base = res.data
		},
		// 选资源
		showImage() {
			this.dialogVisible = true
		},
		selectedImg(file) {
			this.base.shop_logo = file[0].url
			this.dialogVisible = false
		},
		// 移除图片
		removeImg() {
			this.base.shop_logo = ''
		},
		async save() {
			let res = await this.$API.system.save.post(this.base)
			if (res.code == 0) {
				this.$message.success('保存成功')
			} else {
				this.$message.error(res.msg)
			}
		}
	}
}
</script>

<style scoped>
.img-list {
	height: 60px;
	padding-left: 0;
	margin-top: 0;
}
.img-list li:first-child {
	margin-left: 0;
}
.img-list li {
	width: 58px;
	height: 58px;
	float: left;
	margin-left: 5px;
	cursor: pointer;
	position: relative;
}
.addImg {
	height: 56px;
	width: 56px;
	line-height: 56px;
	text-align: center;
	border: 1px dashed rgb(221, 221, 221);
}
ul li {list-style: none}
.image-check-dialog .el-dialog__header {display: none}
.image-check-dialog .el-dialog__body {padding: 0;}
.img-list .img-tools {
	position: absolute;
	width: 58px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	top: 43px;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
</style>
